<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约会列表 - 心动社交</title>
    
    <!-- 引入外部资源 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <style>
        :root {
            --primary: #10B981;
            --primary-light: #34D399;
            --secondary: #3B82F6;
            --accent: #F59E0B;
            --dark: #1F2937;
            --light: #F9FAFB;
            --gray: #6B7280;
            --light-gray: #E5E7EB;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
            --shadow: 0 4px 16px rgba(0,0,0,0.12);
            --transition: all 0.3s ease;
            --radius: 10px;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #F0FDF4;
            color: var(--dark);
            line-height: 1.6;
            padding-bottom: 3rem;
        }
        
        .container {
            max-width: 1200px;
        }
        
        /* 页面头部样式 */
        .page-header {
            padding: 2rem 0;
            margin-bottom: 2rem;
            background: linear-gradient(135deg, #ECFDF5 0%, #F9FAFB 100%);
            border-radius: 0 0 25px 25px;
        }
        
        .page-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }
        
        .page-subtitle {
            font-size: 1rem;
            color: var(--gray);
            max-width: 700px;
        }
        
        /* 排序和筛选工具栏 */
        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .sort-options {
            display: flex;
            gap: 10px;
        }
        
        .sort-btn {
            background-color: white;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            padding: 6px 14px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .sort-btn:hover, .sort-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .view-toggle {
            display: flex;
            gap: 8px;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .view-btn:hover, .view-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 多种布局容器 */
        .list-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        /* 大图布局 */
        .featured-item {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            background-color: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }
        
        .featured-item:hover {
            box-shadow: var(--shadow);
        }
        
        .featured-img-container {
            position: relative;
            height: 100%;
        }
        
        .featured-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .featured-content {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
        }
        
        /* 列表视图布局 */
        .list-view .list-container {
            grid-template-columns: 1fr;
        }
        
        .list-view .date-card {
            display: grid;
            grid-template-columns: 200px 1fr;
        }
        
        /* 紧凑网格布局 */
        .compact-view .list-container {
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        }
        
        .compact-view .date-desc {
            display: none;
        }
        
        /* 卡片基础样式 */
        .date-card {
            background-color: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .date-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow);
        }
        
        /* 标签和指示器 */
        .date-label {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: var(--primary);
            color: white;
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 0.7rem;
            font-weight: 600;
            z-index: 1;
        }
        
        .cost-indicator {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: var(--accent);
            color: white;
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 0.75rem;
            font-weight: 600;
            z-index: 1;
        }
        
        /* 图片容器 */
        .img-container {
            position: relative;
            overflow: hidden;
        }
        
        .card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .date-card:hover .card-img {
            transform: scale(1.05);
        }
        
        /* 多图布局 */
        .multi-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 3px;
            height: 100%;
        }
        
        .multi-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .multi-images.count-1 {
            grid-template-columns: 1fr;
        }
        
        .multi-images.count-3 {
            grid-template-rows: repeat(2, 1fr);
        }
        
        .multi-images.count-3 .multi-img:first-child {
            grid-column: span 2;
        }
        
        .multi-images.count-4 {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }
        
        .img-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            border-radius: 3px;
            padding: 1px 5px;
            font-size: 0.7rem;
        }
        
        /* 卡片内容 */
        .card-body {
            padding: 1rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .date-category {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.7rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--primary);
        }
        
        .date-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--dark);
            transition: var(--transition);
            line-height: 1.4;
        }
        
        .date-card:hover .date-title {
            color: var(--primary);
        }
        
        .date-desc {
            color: var(--gray);
            font-size: 0.8rem;
            margin-bottom: 0.75rem;
            line-height: 1.5;
            flex-grow: 1;
        }
        
        .date-meta {
            font-size: 0.75rem;
            color: var(--gray);
            margin-bottom: 0.75rem;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .meta-info {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        /* 作者信息 */
        .publisher {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0.75rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px dashed var(--light-gray);
        }
        
        .publisher-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(16, 185, 129, 0.1);
        }
        
        .publisher-name {
            font-weight: 500;
            font-size: 0.8rem;
        }
        
        .post-date {
            font-size: 0.7rem;
            color: var(--gray);
        }
        
        /* 社交数据 */
        .social-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.75rem;
            color: var(--gray);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .stat-item:hover {
            color: var(--primary);
        }
        
        .stat-item.liked {
            color: #EF4444;
        }
        
        .stat-item.saved {
            color: var(--secondary);
        }
        
        /* 无图卡片样式 */
        .no-image-card {
            border: 1px solid var(--light-gray);
        }
        
        .no-image-header {
            background-color: rgba(16, 185, 129, 0.05);
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .no-image-body {
            padding: 1rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .featured-item {
                grid-template-columns: 1fr;
            }
            
            .list-view .date-card {
                grid-template-columns: 150px 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .list-view .date-card {
                grid-template-columns: 1fr;
            }
            
            .toolbar {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .view-toggle {
                align-self: flex-end;
            }
        }
        
        /* 加载更多按钮 */
        .load-more {
            display: block;
            margin: 2rem auto;
            background-color: white;
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 8px 24px;
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .load-more:hover {
            background-color: var(--primary);
            color: white;
        }
    </style>
</head>
<body>
    <div class="container py-4 px-4">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">热门约会列表</h1>
            <p class="page-subtitle">发现最受欢迎的约会创意，查看真实用户的体验分享和评价</p>
        </div>
        
        <!-- 工具栏 -->
        <div class="toolbar">
            <div class="sort-options">
                <button class="sort-btn active">
                    <i class="fas fa-fire"></i> 热门推荐
                </button>
                <button class="sort-btn">
                    <i class="fas fa-clock"></i> 最新发布
                </button>
                <button class="sort-btn">
                    <i class="fas fa-thumbs-up"></i> 好评优先
                </button>
                <button class="sort-btn">
                    <i class="fas fa-money-bill-wave"></i> 价格从低到高
                </button>
            </div>
            
            <div class="view-toggle">
                <button class="view-btn active" id="gridView">
                    <i class="fas fa-th"></i>
                </button>
                <button class="view-btn" id="listView">
                    <i class="fas fa-list"></i>
                </button>
                <button class="view-btn" id="compactView">
                    <i class="fas fa-th-large"></i>
                </button>
            </div>
        </div>
        
        <!-- 约会列表容器 -->
        <div class="list-container">
            <!-- 大图布局 -->
            <div class="featured-item">
                <div class="featured-img-container">
                    <img src="https://picsum.photos/800/600?random=300" alt="森林徒步野餐约会" class="featured-img">
                    <div class="date-label">热门</div>
                    <div class="cost-indicator">¥120/人</div>
                </div>
                <div class="featured-content">
                    <span class="date-category">户外活动</span>
                    <h3 class="date-title">森林徒步+野餐，亲近自然的浪漫</h3>
                    <p class="date-desc">
                        中等难度的森林徒步路线，全程约3小时，终点有风景优美的野餐区。建议携带轻便食物和水，穿舒适的徒步鞋。沿途有溪流和观景台，非常适合拍照。我会提供详细的路线图和必备物品清单。
                    </p>
                    
                    <div class="date-meta">
                        <div class="meta-info">
                            <i class="far fa-clock"></i> 4-5小时
                        </div>
                        <div class="meta-info">
                            <i class="fas fa-map-marker-alt"></i> 城市森林公园
                        </div>
                        <div class="meta-info">
                            <i class="fas fa-sun"></i> 日间活动
                        </div>
                        <div class="meta-info">
                            <i class="fas fa-user-friends"></i> 2-4人
                        </div>
                    </div>
                    
                    <div class="publisher">
                        <img src="https://picsum.photos/100/100?random=310" alt="自然爱好者小林的头像" class="publisher-avatar">
                        <div>
                            <div class="publisher-name">自然爱好者小林</div>
                            <div class="post-date">发布于 3天前</div>
                        </div>
                    </div>
                    
                    <div class="social-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 9.8k 浏览
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 276 评论
                        </div>
                        <div class="stat-item liked">
                            <i class="fas fa-heart"></i> 1.5k 点赞
                        </div>
                        <div class="stat-item saved">
                            <i class="fas fa-bookmark"></i> 689 收藏
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 网格布局卡片1：多图4张 -->
            <div class="date-card">
                <div class="img-container" style="height: 180px;">
                    <div class="multi-images count-4">
                        <img src="https://picsum.photos/600/400?random=301" alt="手工皮具制作图片1" class="multi-img">
                        <img src="https://picsum.photos/600/400?random=302" alt="手工皮具制作图片2" class="multi-img">
                        <img src="https://picsum.photos/600/400?random=303" alt="手工皮具制作图片3" class="multi-img">
                        <img src="https://picsum.photos/600/400?random=304" alt="手工皮具制作图片4" class="multi-img">
                    </div>
                    <div class="img-count">4图</div>
                    <div class="date-label">创意</div>
                    <div class="cost-indicator">¥198/人</div>
                </div>
                <div class="card-body">
                    <span class="date-category">手工体验</span>
                    <h3 class="date-title">手工皮具制作，共创专属回忆</h3>
                    <p class="date-desc">
                        在专业导师指导下制作小皮具，可以选择制作钥匙扣、卡包或零钱包。材料和工具齐全，完成后可以带走自己的作品，非常有纪念意义。
                    </p>
                    
                    <div class="date-meta">
                        <div class="meta-info">
                            <i class="far fa-clock"></i> 2小时
                        </div>
                        <div class="meta-info">
                            <i class="fas fa-map-marker-alt"></i> 创意工坊
                        </div>
                    </div>
                    
                    <div class="publisher">
                        <img src="https://picsum.photos/100/100?random=311" alt="手艺人阿杰的头像" class="publisher-avatar">
                        <div class="publisher-name">手艺人阿杰</div>
                    </div>
                    
                    <div class="social-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 4.2k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 156
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i> 789
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i> 321
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 网格布局卡片2：无图 -->
            <div class="date-card no-image-card">
                <div class="no-image-header">
                    <div class="date-label">免费</div>
                    <div class="cost-indicator">免费</div>
                </div>
                <div class="no-image-body">
                    <span class="date-category">文化体验</span>
                    <h3 class="date-title">图书馆约会，安静的知识交流</h3>
                    <p class="date-desc">
                        在市立图书馆共度下午时光，各自挑选一本好书，在阅读区安静阅读。中场休息时可以在咖啡厅交流读书心得，适合喜欢安静的情侣。
                    </p>
                    
                    <div class="date-meta">
                        <div class="meta-info">
                            <i class="far fa-clock"></i> 3小时
                        </div>
                        <div class="meta-info">
                            <i class="fas fa-map-marker-alt"></i> 市立图书馆
                        </div>
                    </div>
                    
                    <div class="publisher">
                        <img src="https://picsum.photos/100/100?random=312" alt="书虫小文的头像" class="publisher-avatar">
                        <div class="publisher-name">书虫小文</div>
                    </div>
                    
                    <div class="social-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 2.8k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 98
                        </div>
                        <div class="stat-item liked">
                            <i class="fas fa-heart"></i> 543
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i> 189
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 网格布局卡片3：单图 -->
            <div class="date-card">
                <div class="img-container" style="height: 180px;">
                    <img src="https://picsum.photos/600/400?random=305" alt="夜市美食探索" class="card-img">
                    <div class="date-label">美食</div>
                    <div class="cost-indicator">¥80/人</div>
                </div>
                <div class="card-body">
                    <span class="date-category">美食体验</span>
                    <h3 class="date-title">夜市美食探索，边走边吃</h3>
                    <p class="date-desc">
                        本地最热闹的夜市，汇集各地特色小吃。我整理了一份必吃清单，从甜到咸应有尽有。边走边吃，边聊边逛，轻松愉快的约会体验。
                    </p>
                    
                    <div class="date-meta">
                        <div class="meta-info">
                            <i class="far fa-clock"></i> 2-3小时
                        </div>
                        <div class="meta-info">
                            <i class="fas fa-map-marker-alt"></i> 东门夜市
                        </div>
                        <div class="meta-info">
                            <i class="fas fa-moon"></i> 夜间活动
                        </div>
                    </div>
                    
                    <div class="publisher">
                        <img src="https://picsum.photos/100/100?random=313" alt="美食探险家小胖的头像" class="publisher-avatar">
                        <div class="publisher-name">美食探险家小胖</div>
                    </div>
                    
                    <div class="social-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 6.5k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 321
                        </div>
                        <div class="stat-item liked">
                            <i class="fas fa-heart"></i> 1.2k
                        </div>
                        <div class="stat-item saved">
                            <i class="fas fa-bookmark"></i> 567
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 网格布局卡片4：多图2张 -->
            <div class="date-card">
                <div class="img-container" style="height: 180px;">
                    <div class="multi-images count-2">
                        <img src="https://picsum.photos/600/400?random=306" alt="宠物咖啡馆图片1" class="multi-img">
                        <img src="https://picsum.photos/600/400?random=307" alt="宠物咖啡馆图片2" class="multi-img">
                    </div>
                    <div class="img-count">2图</div>
                    <div class="date-label">萌宠</div>
                    <div class="cost-indicator">¥68/人</div>
                </div>
                <div class="card-body">
                    <span class="date-category">休闲娱乐</span>
                    <h3 class="date-title">宠物咖啡馆，与萌宠共度时光</h3>
                    <p class="date-desc">
                        有各种可爱猫咪和狗狗的咖啡馆，点一杯饮品就可以和它们互动。店内环境温馨，适合喜欢小动物的情侣，也能缓解初次约会的紧张感。
                    </p>
                    
                    <div class="date-meta">
                        <div class="meta-info">
                            <i class="far fa-clock"></i> 1.5小时
                        </div>
                        <div class="meta-info">
                            <i class="fas fa-map-marker-alt"></i> 文创园区
                        </div>
                    </div>
                    
                    <div class="publisher">
                        <img src="https://picsum.photos/100/100?random=314" alt="宠物爱好者小琪的头像" class="publisher-avatar">
                        <div class="publisher-name">宠物爱好者小琪</div>
                    </div>
                    
                    <div class="social-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 3.7k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 189
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i> 876
                        </div>
                        <div class="stat-item saved">
                            <i class="fas fa-bookmark"></i> 345
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 网格布局卡片5：多图3张 -->
            <div class="date-card">
                <div class="img-container" style="height: 180px;">
                    <div class="multi-images count-3">
                        <img src="https://picsum.photos/600/400?random=308" alt="户外电影之夜图片1" class="multi-img">
                        <img src="https://picsum.photos/600/400?random=309" alt="户外电影之夜图片2" class="multi-img">
                        <img src="https://picsum.photos/600/400?random=315" alt="户外电影之夜图片3" class="multi-img">
                    </div>
                    <div class="img-count">3图</div>
                    <div class="date-label">浪漫</div>
                    <div class="cost-indicator">¥120/人</div>
                </div>
                <div class="card-body">
                    <span class="date-category">娱乐体验</span>
                    <h3 class="date-title">屋顶户外电影之夜，星空下的浪漫</h3>
                    <p class="date-desc">
                        屋顶露台的户外电影放映，每周六晚上播放经典爱情电影。提供舒适的坐垫和毛毯，还有特色饮品和小食。提前预约可以选择最佳观影位置。
                    </p>
                    
                    <div class="date-meta">
                        <div class="meta-info">
                            <i class="far fa-clock"></i> 2.5小时
                        </div>
                        <div class="meta-info">
                            <i class="fas fa-map-marker-alt"></i> 文创园屋顶
                        </div>
                        <div class="meta-info">
                            <i class="fas fa-moon"></i> 夜间活动
                        </div>
                    </div>
                    
                    <div class="publisher">
                        <img src="https://picsum.photos/100/100?random=316" alt="电影迷阿泽的头像" class="publisher-avatar">
                        <div class="publisher-name">电影迷阿泽</div>
                    </div>
                    
                    <div class="social-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 5.2k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 234
                        </div>
                        <div class="stat-item liked">
                            <i class="fas fa-heart"></i> 1.1k
                        </div>
                        <div class="stat-item saved">
                            <i class="fas fa-bookmark"></i> 456
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 网格布局卡片6：无图 -->
            <div class="date-card no-image-card">
                <div class="no-image-header">
                    <div class="date-label">运动</div>
                    <div class="cost-indicator">¥50/人</div>
                </div>
                <div class="no-image-body">
                    <span class="date-category">户外活动</span>
                    <h3 class="date-title">双人羽毛球赛，健康又有趣</h3>
                    <p class="date-desc">
                        在室内羽毛球馆进行轻松的双打比赛，挥洒汗水的同时增进感情。场馆提供球拍和球，结束后可以在旁边的果汁店休息聊天。
                    </p>
                    
                    <div class="date-meta">
                        <div class="meta-info">
                            <i class="far fa-clock"></i> 1.5小时
                        </div>
                        <div class="meta-info">
                            <i class="fas fa-map-marker-alt"></i> 体育中心
                        </div>
                    </div>
                    
                    <div class="publisher">
                        <img src="https://picsum.photos/100/100?random=317" alt="运动健将阿强的头像" class="publisher-avatar">
                        <div class="publisher-name">运动健将阿强</div>
                    </div>
                    
                    <div class="social-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 2.1k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 87
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i> 432
                        </div>
                        <div class="stat-item saved">
                            <i class="fas fa-bookmark"></i> 123
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <button class="load-more">
            <i class="fas fa-refresh"></i> 加载更多约会
        </button>
    </div>

    <script>
        // 视图切换功能
        const gridViewBtn = document.getElementById('gridView');
        const listViewBtn = document.getElementById('listView');
        const compactViewBtn = document.getElementById('compactView');
        const container = document.querySelector('.list-container').parentElement;
        
        gridViewBtn.addEventListener('click', function() {
            container.classList.remove('list-view', 'compact-view');
            setActiveViewBtn(this);
        });
        
        listViewBtn.addEventListener('click', function() {
            container.classList.add('list-view');
            container.classList.remove('compact-view');
            setActiveViewBtn(this);
        });
        
        compactViewBtn.addEventListener('click', function() {
            container.classList.add('compact-view');
            container.classList.remove('list-view');
            setActiveViewBtn(this);
        });
        
        function setActiveViewBtn(btn) {
            document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
        }
        
        // 排序按钮功能
        document.querySelectorAll('.sort-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                showToast(`已按 "${this.textContent.trim()}" 排序`);
            });
        });
        
        // 点赞功能
        document.querySelectorAll('.stat-item .fa-heart').forEach(icon => {
            icon.parentElement.addEventListener('click', function(e) {
                e.stopPropagation();
                
                const isLiked = this.classList.contains('liked');
                const countEl = this.querySelector('span');
                let count = parseInt(countEl.textContent.replace(/,|\s/g, ''));
                
                if (isLiked) {
                    this.classList.remove('liked');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    count--;
                } else {
                    this.classList.add('liked');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    count++;
                }
                
                countEl.textContent = count.toLocaleString() + ' 点赞';
                showToast(isLiked ? "已取消点赞" : "点赞成功");
            });
        });
        
        // 收藏功能
        document.querySelectorAll('.stat-item .fa-bookmark').forEach(icon => {
            icon.parentElement.addEventListener('click', function(e) {
                e.stopPropagation();
                
                const isSaved = this.classList.contains('saved');
                const countEl = this.querySelector('span');
                let count = parseInt(countEl.textContent.replace(/,|\s/g, ''));
                
                if (isSaved) {
                    this.classList.remove('saved');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    count--;
                } else {
                    this.classList.add('saved');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    count++;
                }
                
                countEl.textContent = count.toLocaleString() + ' 收藏';
                showToast(isSaved ? "已取消收藏" : "收藏成功");
            });
        });
        
        // 评论查看
        document.querySelectorAll('.stat-item .fa-comment').forEach(icon => {
            icon.parentElement.addEventListener('click', function(e) {
                e.stopPropagation();
                const title = this.closest('.date-card, .featured-item').querySelector('.date-title').textContent;
                showToast(`查看 "${title}" 的评论`);
            });
        });
        
        // 卡片点击查看详情
        document.querySelectorAll('.date-card, .featured-item').forEach(card => {
            card.addEventListener('click', function() {
                const title = this.querySelector('.date-title').textContent;
                showToast(`查看 "${title}" 的详细信息`);
                // 实际应用中可跳转至详情页
                // window.location.href = 'detail.html';
            });
        });
        
        // 加载更多
        document.querySelector('.load-more').addEventListener('click', function() {
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                this.innerHTML = '<i class="fas fa-refresh"></i> 加载更多约会';
                showToast('已加载更多约会内容');
            }, 1500);
        });
        

    </script>
</body>
</html>
    
